90
EO-System / Design Reference
File No. EO-DS-001
PLASMA ORBITAL ®The Design
System.
A living system — not a static style guide. It houses the brand, content and visual standards plus a coded component library, reusable patterns, imagery direction, and the rules for keeping it all in sync. Built for sovereign maritime intelligence: paper, ink, and one signal colour.
Style guides
Component library
Pattern library
Imagery
Governance
◆Brand mark
The orbital mark.
An ascending chevron crossed by an orbit — the primary identity. Four colourways cover every context; keep clear space around it equal to the orbit ring, and never recolour outside the palette. Download SVG or PNG. Master in assets/logo/.
00The system
A design system, not just a style guide.
A style guide documents standards. A design system adds the reusable, coded parts and the governance to scale them. This reference is the human-readable face of the repository below — every value here is a live token or a compiled component.
Brand & visual style guide
tokens/ · guidelines/
Colour, typography, spacing, corners, logo, imagery, icons — the look. Sections 01–05.
Content style guide
readme.md · §08
Voice, tone, grammar, casing. How Plasma Orbital writes. Section 08.
Component library
components/ → _ds_bundle.js
Nine coded React primitives with props, states & usage. Section 06.
Pattern library
ui_kits/ · templates/
Components assembled into recurring screens & layouts. Section 07.
Usage guidelines
§09 · *.prompt.md
Do's and don'ts so the system is applied consistently. Section 09.
Governance
§10 · SKILL.md
Source of truth, versioning, and how to contribute. Section 10.
01Brand · Colour
Paper, ink, white, and one signal.
A five-value palette. Hierarchy comes from opacity ramps, not new hues. Vermilion is reserved for accents and one full-bleed break; pure white is reserved for detection data on imagery.
Ink opacity ramp — on paper
75 · body
55 · muted
45 · faint
25
15 · line
10
Paper ramp — for text & lines on ink / vermilion / imagery
paper
80 · body
60
45 · muted
20 · line
10
02Brand · Typography
Big, tight display. Quiet body. Dossier labels.
Space Grotesk runs the headlines hard and tight. Inter carries the reading. Space Mono is the signature uppercase label — the thing that makes copy feel like a file.
Display · megaSpace Grotesk 700 · −0.05em · LH 0.8
DAYLIGHT
Display · xlSpace Grotesk 600 · −0.04em
The ocean ran out of hiding places.
Display · mdSpace Grotesk 500
Sees. Thinks. Tells.
BodyInter 400 · 15–17px · LH 1.6
Onboard AI processes imagery at the edge, identifies vessels of interest, and transmits only what matters — not the homework.
Mono labelSpace Mono · 11px · 0.15em · UPPER
01 — The problem
File No. EO-001
Fig. 04
03Visual · Grid & form
Hairline grid. Square corners. No shadows.
A 12-column grid drawn in 1px hairlines, spacing on a 4px base, and square corners throughout. Depth comes from inverted ink panels — never a drop shadow on paper.
12-column hairline grid · max-width 110rem · gutter 32px
01
02
03
04
05
06
07
08
09
10
11
12
01Index · 3 col
Content spans the remaining nine.
The recurring brand layout — a mono index in the left columns, the argument on the right.
Spacing scale · 4px base · token
--space-n2·8
4·16
6·24
8·32
12·48
16·64
20·80
24·96
Borders & corners
10%
15%
25%
Elevation · three levels only
Level 0flat
Paper UI — flush to the page. Hairline border, no shadow, ever.
Level 1inverted
Depth by inversion — ink panels, spec tables, the footer.
Level 2overlay
Lifts off the page — dialogs & toasts only. --shadow-overlay
04Brand · Imagery
Slate Noir — tactical monochrome.
The house style for hero and product renders. Pure grayscale, sculpted rim-light out of a black void, one cool violet-blue accent for compute, and white data-points marking detections. Three imagery modes exist: Slate Noir renders, blueprint line-drawings, and desaturated photography.
Hero · clean sceneMatte charcoal, black void, no labels
Detection · overlayWhite boxes · [SHIP 00n] type, conf.
Vessel study · catalogue plateContainer class · three views
Orthographic vessel renders for spec pages and detection-model reference — same matte grayscale, black void, raking rim-light. Catalogue plates carry no accent colour and no data-points; those belong to the detection overlay only.
Void #0A0A0C
Charcoal
Slate
Light slate
Violet-blue
Data #FFF
Art-direction promptguidelines/art-direction.md
Slate Noir: Tactical Monochrome Product Illustration. True monochromatic (pure grayscale) — deep charcoals, slate grays, matte black; no colour saturation. Tactile surfaces: bead-blasted metal on the satellite body, precise grid etching on solar panels, micro-textures on catching edges. Mood: covert, premium, state-of-the-art. Lighting: dramatic low-key cinematic; harsh precise rim lighting carving objects out of a pure black void; no soft fill. Composition: three-quarter orbital view over an Earth segment from a dark void. One non-grayscale element only — a vivid cool violet-blue laser fanning from a glass-and-metal processor cube to the satellite. Five+ laser-fine white lines fan down to monochrome Earth targets, each with a clean white data-point circle: rover, ground dish, research vessel, community centre, sea-bed sensor cluster. Near-pitch-black background, no baked text labels.
Inspiration & reference
05Brand · Iconography
One line set. Drawn, not borrowed.
A proprietary 20–22px line set — 1.25–1.375 stroke, rounded joins, on the same geometry as the UI. Every icon ships as currentColor, so it inherits ink on paper or paper on dark. Each is downloadable as SVG or PNG; the full set lives in assets/icons/. For anything outside this set, fall back to Tabler Icons at matching weight.
Detection pipeline · shown on dark (native)
Capabilities
Section markers
06Component library
Primitives — live, with states.
Nine coded React components compiled into _ds_bundle.js. Documented below with variants, interaction states, and props. Hover them: solid buttons flip to vermilion, rows tint, photos resolve to colour.
Loading components…
Button — states
| State | Solid | Outline | Ghost |
|---|---|---|---|
| Enabled | Ink fill, paper text | Hairline border, ink text | Ink text, no border |
| Hover | → Vermilion fill | → Ink fill, paper text | → Vermilion text |
| Focus | Inherits hover treatment; inputs gain a vermilion border | ||
| Disabled | 40% opacity, not-allowed cursor, no hover | ||
| Prop | Type | Default |
|---|---|---|
| variant | solid · outline · ghost | solid |
| size | sm · md · lg | md |
| glyph | node — leading "▶ / →" | — |
| href | string — renders an anchor | — |
| disabled | boolean | false |
const { Button } = window.PlasmaOrbitalDesignSystem_840117; <Button variant="solid" glyph="▶">Book a briefing</Button>
07Pattern library
Patterns — components, assembled.
Recurring arrangements the brand repeats. Built from the primitives above; shipped at scale in the ui_kits/website/ recreation and the templates/editorial-page/ starter.
Dossier stripFig. A
EO-System / Sovereign Maritime IntelligenceFile No. EO-001
Section headerFig. B
03Master plan
First, one. Then, everywhere.
Staged statisticFig. C
$150bn
annual losses from illicit activity in national waters
Blueprint figureFig. D
08Content · Voice & tone
Apple confidence, dossier discipline.
Headlines carry the wordplay; the sober capability claim sits directly underneath, in that order. Numbers are staged, never listed.
"Your waters. Your satellites. Your call."
Verbs over adjectives
"It understands them" beats "advanced AI-powered analysis."
One idea per section
If a sentence needs a comma and an "and," it's two sections.
Stage the number
One numeral, huge. Context arrives after impact.
Sentence case, always
UPPERCASE only for mono labels and the wordmark. Em-dashes are intentional.
Second person
Hand the reader power: "Your waters. Your call."
No exclamation marks. No emoji.
Ever. Confidence is the tone; humility is the footnote.
09Usage guidelines
Do, and don't.
The rules that keep the system coherent across hands. When in doubt, subtract.
✓ Do
- Keep corners square; only avatars and status dots are round.
- Build depth from hairlines and inverted ink panels.
- Reserve vermilion for accents, eyebrow numbers, links, and one break.
- Stage one big number per idea; let it breathe.
- Use white only as a detection data-point / rule on Slate Noir imagery.
- Pull body contrast from the ink opacity ramp.
✕ Don't
- Add drop shadows, gradients, or background textures on paper.
- Round corners or introduce a second accent colour.
- Put vermilion or colour onto Slate Noir imagery (white only).
- Use exclamation marks, emoji, or title-case headlines.
- Let wordplay touch a capability claim — pair it with the sober line.
- Hand-draw icons; use numerals, arrow glyphs, or Tabler when needed.
10Governance & maintenance
One source of truth, kept in sync.
A design system is only as good as its upkeep. These are the rules that keep documentation and code from drifting apart.
| Source of truth | Tokens live in tokens/*.css (imported by styles.css); components in components/<group>/. This sheet renders from them — never hard-code a value here that isn't a token. |
| Single namespace | All components compile to window.PlasmaOrbitalDesignSystem_840117. Consumers link styles.css + _ds_bundle.js only. |
| Adding a component | Add Name.jsx + Name.d.ts + Name.prompt.md in a group folder, plus one @dsCard preview. Reference tokens; import React only. |
| Changing a token | Edit the tokens/ file. Every card, component, kit and template updates automatically — that is the point of the ramp-and-alias structure. |
| Versioning | File No. EO-DS-001 · Rev. 2026.06. Bump the revision on any breaking token or component change; note it in readme.md. |
| Portability | SKILL.md makes the whole system installable as a Claude Agent Skill for production or prototype work. |
11Editorial & print
Layouts that generate to PDF.
The system extends to print. Two A4 starting points — a field-note one-pager and a multi-page whitepaper — carry the same dossier header strip, numbered sections, staged stats and running folios. Open one, fill it in, Save as PDF. Live in templates/.